.sidebar-handler {
    appearance: none;
    border: 0;
    width: 17px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 0;
    z-index: 100;
    cursor: pointer;
    pointer-events: auto;

    input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: 0;
        appearance: none;
        margin: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        z-index: -1;
    }

    svg {
        opacity: 0;
        transition: opacity 0.5s 1s;
        pointer-events: none;
    }

    &:focus-visible {
        outline: 2px solid -webkit-focus-ring-color;
    }

    &:hover svg,
    &.collapsed svg {
        opacity: 1;
        transition: opacity 0.2s;
    }
}

.sidebar-handler-bg-color {
    fill: #ffffff;
}

.sidebar-handler-border-color {
    stroke: var(--grey-1);
}

.sidebar-handler-image-stroke-color {
    stroke: var(--grey-6);
}

.sidebar-handler-image-fill-color {
    fill: var(--grey-6);
}

.realtime-panel:hover+.sidebar-handler svg {
    opacity: 1;
    transition: opacity 0.2s;
}

.flat-color-scheme-dark {
    .sidebar-handler-bg-color {
        fill: var(--grey-9);
    }

    .sidebar-handler-border-color {
        stroke: var(--grey-8);
    }

    .sidebar-handler-image-stroke-color {
        stroke: var(--grey-5);
    }

    .sidebar-handler-image-fill-color {
        fill: var(--grey-5);
    }
}
